/**
 * MaTengyu 2013-11-27 Final
 * A Picker field that contains a tree panel on its popup, enabling selection of tree nodes.
 */
Ext.define('Ext.ux.TreePicker', {
    extend: 'Ext.form.field.Picker',
    alias: 'widget.pickerTree',
    uses: [
        'Ext.tree.Panel'
    ],
    triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
    config: {
        /**
         * @cfg {Ext.data.TreeStore} store
         * A tree store that the tree picker will be bound to
         */
        store: null,
        /**
         * @cfg {String} displayField
         * The field inside the model that will be used as the node's text.
         * Defaults to the default value of {@link Ext.tree.Panel}'s `displayField` configuration.
         */
        displayField: null,

        /**
         * author : zhaoyuan
         * .添加了valueField，可以在前台配置valueField
         */
        valueField : 'value',
        /**
         * 默认不显示根节点
         */
        rootVisible: false,

        /**
         * author : zhaoyuan
         * .添加了多选功能，如果设置成false只监听itemclick事件
         */
        multiSelect : true,
        /**
         * @cfg {Array} columns
         * An optional array of columns for multi-column trees
         */
        columns: null,
        /**
         * @cfg {Boolean} selectOnTab
         * Whether the Tab key should select the currently highlighted item. Defaults to `true`.
         */
        selectOnTab: true,
        /**
         * @cfg {Number} maxPickerHeight
         * The maximum height of the tree dropdown. Defaults to 300.
         */
        maxPickerHeight: 200,
        /**
         * @cfg {Number} minPickerHeight
         * The minimum height of the tree dropdown. Defaults to 100.
         */
        minPickerHeight: 100
    },
    editable: false,
    initComponent: function () {
        var me = this;
        me.callParent(arguments);

        me.addEvents(
                /**
                 * @event select
                 * Fires when a tree node is selected
                 * @param {Ext.ux.TreePicker} picker        This tree picker
                 * @param {Ext.data.Model} record           The selected record
                 */
                'select'
                );

        me.mon(me.store, {
            scope: me,
            load: me.onLoad,
            update: me.onUpdate
        });
    },
    /**
     * Creates and returns the tree panel to be used as this field's picker.
     */
    createPicker: function () {
        var me = this,
                picker = Ext.create('Ext.tree.Panel', {
                    shrinkWrapDock: 2, //没有这个会报错：Layout run failed
                    store: me.store,
                    floating: true,
                    displayField: me.displayField,
                    columns: me.columns,
                    minHeight: me.minPickerHeight,
                    maxHeight: me.maxPickerHeight,
                    rootVisible: me.rootVisible,
                    manageHeight: true, //在到达minHeight后，展开节点时自动调整高度
                    shadow: true, //组件旁边有没有阴影效果
                    listeners: {
                        scope: me,
                        itemclick: me.onItemClick,
                        checkchange : me.onCheckChange
                    },
                    viewConfig: {
                        listeners: {
                            scope: me,
                            render: me.onViewRender,
                            beforerender:me.onBeforeRender
                        }
                    }
                }),
                view = picker.getView();

        if (Ext.isIE9 && Ext.isStrict) {
            // In IE9 strict mode, the tree view grows by the height of the horizontal scroll bar when the items are highlighted or unhighlighted.
            // Also when items are collapsed or expanded the height of the view is off. Forcing a repaint fixes the problem.
            view.on({
                scope: me,
                highlightitem: me.repaintPickerView,
                unhighlightitem: me.repaintPickerView,
                afteritemexpand: me.repaintPickerView,
                afteritemcollapse: me.repaintPickerView
            });
        }
        return picker;
    },
    onViewRender: function (view) {
        view.getEl().on('keypress', this.onPickerKeypress, this);
    },

    onBeforeRender:function(me, eOpts){
        var store = me.getStore();

    },
    /**
     * repaints the tree view
     */
    repaintPickerView: function () {
        var style = this.picker.getView().getEl().dom.style;

        // can't use Element.repaint because it contains a setTimeout, which results in a flicker effect
        style.display = style.display;
    },
    /**
     * Aligns the picker to the input element
     */
    alignPicker: function () {
        var me = this,
                picker;

        if (me.isExpanded) {
            picker = me.getPicker();
            if (me.matchFieldWidth) {
                // Auto the height (it will be constrained by max height)
                picker.setWidth(me.bodyEl.getWidth());
            }
            if (picker.isFloating()) {
                me.doAlign();
            }
        }
    },
    /**
     * Handles a click even on a tree node
     * @private
     * @param {Ext.tree.View} view
     * @param {Ext.data.Model} record
     * @param {HTMLElement} node
     * @param {Number} rowIndex
     * @param {Ext.EventObject} e
     */
    onItemClick: function (view, record, node, rowIndex, e) {
        var me = this;
        var multiSelect = me.multiSelect;
        if(multiSelect){  //允许多选
            this.onCheckChange(record);
        }else{    //只能单选
            this.selectItem(record);
        }
    },

    onCheckChange:function(node, checked, eOpts ){
        var nodes = node.getOwnerTree().getChecked();
        var me = this;
        this.setMultiValues(nodes);
        me.fireEvent('select', me, node);
    },
    /**
     * Handles a keypress event on the picker element
     * @private
     * @param {Ext.EventObject} e
     * @param {HTMLElement} el
     */
    onPickerKeypress: function (e, el) {
        var key = e.getKey();

        if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
            this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
        }
    },
    /**
     * Changes the selection to a given record and closes the picker
     * @private
     * @param {Ext.data.Model} record
     */
    selectItem: function (record) {
        var me = this;
        var valueField = me.valueField;
        me.setValue(record);
        me.picker.hide();
        me.inputEl.focus();
        me.fireEvent('select', me, record)
    },
    /**
     * Runs when the picker is expanded.  Selects the appropriate tree node based on the value of the input element,
     * and focuses the picker so that keyboard navigation will work.
     * @private
     */
    onExpand: function () {
        var me = this,
                picker = me.picker,
                store = picker.store,
                value = me.value,
                node;


        if (value) {
            node = store.getNodeById(value);
        }

        if (!node) {
            node = store.getRootNode();
        }

        picker.selectPath(node.getPath());

        Ext.defer(function () {
            picker.getView().focus();
        }, 1);
    },
    /**
     * Sets the specified value into the field
     * @param {Mixed} value
     * @return {Ext.ux.TreePicker} this
     */
    setValue: function (record) {
        var me = this;
        if(!record){
            return me;
        }
        me.value = record.get(me.valueField);
        if (me.store.loading) {
            return me;
        }
        me.setRawValue(record ? record.get(me.displayField) : '');
        me.value = record ? record.get(me.valueField) : '';
        return me;
    },
    setMultiValues:function(records){
        var me = this;
        var text = "";
        var value = "";
        if(records){
            var texts = [];
            var values = [];
            for(var i = 0;i<records.length;i++){
                texts.push(records[i].get(me.displayField));
                values.push(records[i].get(me.valueField));
            }
            text = texts.join();
            value = values.join();
        }
        me.value=value;
        me.setRawValue(text);
        return me;
    },
    getSubmitValue: function () {
        return this.value;
    },
    /**
     * Returns the current data value of the field (the idProperty of the record)
     * @return {Number}
     */
    getValue: function () {
        return this.value;
    },
    /**
     * Handles the store's load event.
     * @private
     */
    onLoad: function () {
        var value = this.value;
        if (value) {
            this.setValue(value);
        }
    },
    onUpdate: function (store, rec, type, modifiedFieldNames) {
        var display = this.displayField;

        if (type === 'edit' && modifiedFieldNames && Ext.Array.contains(modifiedFieldNames, display) && this.value === rec.getId()) {
            this.setRawValue(rec.get(display));
        }
    }

});

